<template>
  <div class="">
    <!-- 新增星链设备 -->
    <a-modal
      title="新增"
      :visible="visible"
      width="800px"
      :confirm-loading="confirmLoading"
      @ok="handleSearch"
      @cancel="handleCancel"
    >
      <a-button-group>
        <a-button
          :type="current === '导入文件' ? 'primary' : ''"
          @click="changeCurrent('导入文件')"
          >导入文件</a-button
        >
        <a-button
          :type="current === '手动添加' ? 'primary' : ''"
          @click="changeCurrent('手动添加')"
        >
          手动添加
        </a-button>
      </a-button-group>
      <div v-if="current === '导入文件'" class="addContainer">
        <a-upload-dragger
          :file-list="fileList"
          :remove="handleRemove"
          :before-upload="beforeUpload"
        >
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox" />
          </p>
          <p class="ant-upload-text">
            点击或者拖动文件到虚线框内上传
          </p>
          <p class="ant-upload-hint">
            支持txt、csv等类型的文件
          </p>
        </a-upload-dragger>
      </div>
      <!-- 通过文件导入 -->
      <div v-if="current === '手动添加'" class="addContainer">
        <a-form
          class="ant-advanced-search-form"
          :form="form"
          :label-col="{ span: 9 }"
          :wrapper-col="{ span: 15 }"
          @submit="handleSearch"
        >
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="ID/名称">
                <a-input
                  v-decorator="[
                    'starlinkId',
                    {
                      initialValue: 11222,
                      rules: [
                        { required: true, message: 'Please input your note!' },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="红网IP地址">
                <a-input
                  v-decorator="[
                    'rednet_ip',
                    {
                      initialValue: '11.29.1.11',
                      rules: [
                        { required: true, message: 'Please input your note!' },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="蓝网IP地址">
                <a-input
                  v-decorator="[
                    'bluenet_ip',
                    {
                      initialValue: '11.29.1.11',
                      rules: [
                        { required: true, message: 'Please input your note!' },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="红网Mac地址">
                <a-input
                  v-decorator="[
                    'rednet_mac',
                    {
                      initialValue: '11:22:33:44:55:66',
                      rules: [
                        { required: true, message: 'Please input your note!' },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="蓝网Mac地址">
                <a-input
                  v-decorator="[
                    'bluenet_mac',
                    {
                      initialValue: '11:22:33:44:55:66',
                      rules: [
                        { required: true, message: 'Please input your note!' },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="红网子网掩码">
                <a-input
                  v-decorator="[
                    'rednet_mask',
                    {
                      initialValue: '123',
                      rules: [
                        { required: true, message: 'Please input your note!' },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="蓝网子网掩码">
                <a-input
                  v-decorator="[
                    'bluenet_mask',
                    {
                      initialValue: '123',
                      rules: [
                        { required: true, message: 'Please input your note!' },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="Link">
                <a-input
                  v-decorator="[
                    'link',
                    {
                      initialValue: '123',
                      rules: [
                        { required: true, message: 'Please input your note!' },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="Offset">
                <a-input
                  v-decorator="[
                    'offset',
                    {
                      initialValue: '123',
                      rules: [
                        { required: true, message: 'Please input your note!' },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 通过手动添加 -->
    </a-modal>
  </div>
</template>

<script>
import { postAddLink, postAddLinks } from '../../services/user.js';
export default {
  props: {},
  data() {
    return {
      visible: true,
      fileList: [],
      uploading: false,
      confirmLoading: false,
      current: '导入文件',
      form: this.$form.createForm(this, { name: 'coordinated' }),
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },
    handleUpload() {
      const { fileList } = this;
      const formData = new FormData();
      formData.append('requestId', new Date().getTime());
      fileList.forEach((file) => {
        formData.append('file', file);
      });
      this.uploading = true;
      postAddLinks(formData).then(this.addAffter);
    },
    changeCurrent(str) {
      this.current = str;
    },
    addAffter(res) {
      if (res.data.result.success) {
        this.$message.success(res.data.result.message);
      } else {
        this.$message.error(res.data.result.message);
      }
      // 刷新列表
      // 关闭弹框
      this.$emit('closeAdd');
    },
    handleSearch() {
      // 判断 是 单个上传 还是 批量上传
      if (this.current === '导入文件') {
        // 上传文件
        this.handleUpload();
      } else {
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
            let params = {};
            params.requestId = new Date().getTime();
            params.data = [
              { ...values, operator: this.$store.state.account.userObj.name },
            ];
            postAddLink(params).then(this.addAffter);
          } else {
            console.log('表单有问题');
          }
        });
      }
    },
    handleCancel() {
      this.$emit('closeAdd');
    },
  },
  components: {},
};
</script>

<style scoped lang="less">
.addContainer {
  margin-top: 16px;
}
</style>
